<!doctype html>
<html lang="en">
  <head>
    @@include("partials/head.html", {
      "title": "Dashkit"
    })
  </head>
  <body>

    <!-- MODALS
    ================================================== -->
    @@include("partials/modals.html")

    <!-- SIDEBAR
    ================================================== -->
    @@include("partials/sidebar.html", {
      "category": "pages",
      "subcategory": "project",
      "page": "project-files.html",
      "user": true
    })

    <!-- MAIN CONTENT
    ================================================== -->
    <div class="main-content">

      <!-- HEADER -->
      <div class="header">
        <div class="container-fluid">
          
          <!-- Body -->
          <div class="header-body">
            <div class="row align-items-center">
              <div class="col-auto">

                <!-- Avatar -->
                <div class="avatar avatar-lg avatar-4by3">
                  <img src="assets/img/avatars/projects/project-1.jpg" alt="..." class="avatar-img rounded">
                </div>

              </div>
              <div class="col ml--3 ml-md--2">
                
                <!-- Pretitle -->
                <h6 class="header-pretitle">
                  Projects
                </h6>

                <!-- Title -->
                <h1 class="header-title">
                  Homepage Redesign
                </h1>

              </div>
              <div class="col-12 col-md-auto mt-3 mt-md-0">
                
                <!-- Avatar group -->
                <div class="avatar-group">
                  <a href="profile-posts.html" class="avatar" data-toggle="tooltip" title="Dianna Smiley">
                    <img src="assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle border border-body">
                  </a>
                  <a href="profile-posts.html" class="avatar" data-toggle="tooltip" title="Ab Hadley">
                    <img src="assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle border border-body">
                  </a>
                  <a href="profile-posts.html" class="avatar" data-toggle="tooltip" title="Adolfo Hess">
                    <img src="assets/img/avatars/profiles/avatar-3.jpg" alt="..." class="avatar-img rounded-circle border border-body">
                  </a>
                  <a href="profile-posts.html" class="avatar" data-toggle="tooltip" title="Daniela Dewitt">
                    <img src="assets/img/avatars/profiles/avatar-4.jpg" alt="..." class="avatar-img rounded-circle border border-body">
                  </a>
                </div>

                <!-- Button -->
                <a href="#modalMembers" class="btn btn-lg btn-rounded-circle btn-white" data-toggle="modal">
                  +
                </a>

              </div>
            </div> <!-- / .row -->
            <div class="row align-items-center">
              <div class="col">
                
                <!-- Nav -->
                <ul class="nav nav-tabs nav-overflow header-tabs">
                  <li class="nav-item">
                    <a href="project-overview.html" class="nav-link">
                      Overview
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="project-files.html" class="nav-link active">
                      Files
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="project-reports.html" class="nav-link">
                      Reports
                    </a>
                  </li>
                </ul>

              </div>
            </div>
          </div>

        </div> <!-- / .container-fluid -->
      </div> <!-- / .header -->

      <!-- CONTENT -->
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            
            <!-- Files -->
            <div class="card" data-toggle="lists" data-lists-values='["name"]'>
              <div class="card-header">
                <div class="row align-items-center">
                  <div class="col">
                    
                    <!-- Title -->
                    <h4 class="card-header-title">
                      Files
                    </h4>

                  </div>
                  <div class="col-auto">
                    
                    <!-- Dropdown -->
                    <div class="dropdown">

                      <!-- Toggle -->
                      <a href="#!" class="small text-muted dropdown-toggle" data-toggle="dropdown">
                        Sort order
                      </a>

                      <!-- Menu -->
                      <div class="dropdown-menu">
                        <a class="dropdown-item sort" data-sort="name" href="#!">
                          Asc
                        </a>
                        <a class="dropdown-item sort" data-sort="name" href="#!">
                          Desc
                        </a>
                      </div>

                    </div>
    
                  </div>
                  <div class="col-auto">
                    
                    <!-- Button -->
                    <a href="#!" class="btn btn-sm btn-primary">
                      Upload
                    </a>

                  </div>
                </div> <!-- / .row -->
              </div>
              <div class="card-header">
                <div class="row">
                  <div class="col-12">
                    
                    <!-- Form -->
                    <form>
                      <div class="input-group input-group-flush input-group-merge">
                        <input type="search" class="form-control form-control-prepended search" placeholder="Search">
                        <div class="input-group-prepend">
                          <div class="input-group-text">
                            <span class="fe fe-search"></span>
                          </div>
                        </div>
                      </div>
                    </form>

                  </div>
                </div> <!-- / .row -->
              </div>
              <div class="card-body">

                <!-- List -->
                <ul class="list-group list-group-lg list-group-flush list my--4">
                  <li class="list-group-item px-0">
                    
                    <div class="row align-items-center">
                      <div class="col-auto">
                        
                        <!-- Avatar -->
                        <a href="#!" class="avatar avatar-lg">
                          <img src="assets/img/files/file-1.jpg" alt="..." class="avatar-img rounded">
                        </a>

                      </div>
                      <div class="col ml--2">

                        <!-- Title -->
                        <h4 class="card-title mb-1 name">
                          <a href="#!">Launchday Logo</a>
                        </h4>

                        <!-- Text -->
                        <p class="card-text small text-muted mb-1">
                          2.5kb SVG
                        </p>

                        <!-- Time -->
                        <p class="card-text small text-muted">
                          Uploaded by Dianna Smiley on <time datetime="2018-01-03">Jan 3, 2018</time>
                        </p>
                        
                      </div>
                      <div class="col-auto">
                        
                        <!-- Button -->
                        <a href="#!" class="btn btn-sm btn-white d-none d-md-inline-block">
                          Download
                        </a>

                      </div>
                      <div class="col-auto">
                        
                        <!-- Dropdown -->
                        <div class="dropdown">
                          <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                          </a>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a href="#!" class="dropdown-item">
                              Action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Another action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Something else here
                            </a>
                          </div>
                        </div>

                      </div>
                    </div> <!-- / .row -->

                  </li>
                  <li class="list-group-item px-0">
                    
                    <div class="row align-items-center">
                      <div class="col-auto">
                        
                        <!-- Avatar -->
                        <a href="#!" class="avatar avatar-lg">
                          <img src="assets/img/files/file-2.jpg" alt="..." class="avatar-img rounded">
                        </a>

                      </div>
                      <div class="col ml--2">

                        <!-- Title -->
                        <h4 class="card-title mb-1 name">
                          <a href="#!">Example Grid</a>
                        </h4>

                        <!-- Text -->
                        <p class="card-text small text-muted mb-1">
                          1.5mb PNG
                        </p>

                        <!-- Time -->
                        <p class="card-text small text-muted">
                          Uploaded by Dianna Smiley on <time datetime="2018-01-03">Jan 3, 2018</time>
                        </p>
                        
                      </div>
                      <div class="col-auto">
                        
                        <!-- Button -->
                        <a href="#!" class="btn btn-sm btn-white d-none d-md-inline-block">
                          Download
                        </a>

                      </div>
                      <div class="col-auto">
                        
                        <!-- Dropdown -->
                        <div class="dropdown">
                          <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                          </a>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a href="#!" class="dropdown-item">
                              Action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Another action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Something else here
                            </a>
                          </div>
                        </div>

                      </div>
                    </div> <!-- / .row -->

                  </li>
                  <li class="list-group-item px-0">
                    
                    <div class="row align-items-center">
                      <div class="col-auto">
                        
                        <!-- Avatar -->
                        <a href="#!" class="avatar avatar-lg">
                          <span class="avatar-title rounded bg-white text-secondary">
                            <span class="fe fe-folder"></span>
                          </span>
                        </a>

                      </div>
                      <div class="col ml--2">

                        <!-- Title -->
                        <h4 class="card-title mb-1 name">
                          <a href="#!">Screenshot Collection</a>
                        </h4>

                        <!-- Text -->
                        <p class="card-text small text-muted mb-1">
                          6.9mb directory
                        </p>

                        <!-- Time -->
                        <p class="card-text small text-muted">
                          Uploaded by Dianna Smiley on <time datetime="2018-01-03">Jan 3, 2018</time>
                        </p>
                        
                      </div>
                      <div class="col-auto">
                        
                        <!-- Button -->
                        <a href="#!" class="btn btn-sm btn-white d-none d-md-inline-block">
                          Download
                        </a>

                      </div>
                      <div class="col-auto">
                        
                        <!-- Dropdown -->
                        <div class="dropdown">
                          <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                          </a>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a href="#!" class="dropdown-item">
                              Action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Another action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Something else here
                            </a>
                          </div>
                        </div>

                      </div>
                    </div> <!-- / .row -->

                  </li>
                  <li class="list-group-item px-0">
                    
                    <div class="row align-items-center">
                      <div class="col-auto">
                        
                        <!-- Avatar -->
                        <a href="#!" class="avatar avatar-lg">
                          <span class="avatar-title rounded bg-white text-secondary">
                            <span class="fe fe-package"></span>
                          </span>
                        </a>

                      </div>
                      <div class="col ml--2">

                        <!-- Title -->
                        <h4 class="card-title mb-1 name">
                          <a href="#!">Database migration (compressed)</a>
                        </h4>

                        <!-- Text -->
                        <p class="card-text small text-muted mb-1">
                          5.9mb ZIP
                        </p>

                        <!-- Time -->
                        <p class="card-text small text-muted">
                          Uploaded by Dianna Smiley on <time datetime="2018-01-03">Jan 3, 2018</time>
                        </p>
                        
                      </div>
                      <div class="col-auto">
                        
                        <!-- Button -->
                        <a href="#!" class="btn btn-sm btn-white d-none d-md-inline-block">
                          Download
                        </a>

                      </div>
                      <div class="col-auto">
                        
                        <!-- Dropdown -->
                        <div class="dropdown">
                          <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                          </a>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a href="#!" class="dropdown-item">
                              Action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Another action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Something else here
                            </a>
                          </div>
                        </div>

                      </div>
                    </div> <!-- / .row -->

                  </li>
                  <li class="list-group-item px-0">
                    
                    <div class="row align-items-center">
                      <div class="col-auto">
                        
                        <!-- Avatar -->
                        <a href="#!" class="avatar avatar-lg">
                          <img src="assets/img/files/file-3.jpg" alt="..." class="avatar-img rounded">
                        </a>

                      </div>
                      <div class="col ml--2">

                        <!-- Title -->
                        <h4 class="card-title mb-1 name">
                          <a href="#!">Launchday Cover</a>
                        </h4>

                        <!-- Text -->
                        <p class="card-text small text-muted mb-1">
                          750kb JPG
                        </p>

                        <!-- Time -->
                        <p class="card-text small text-muted">
                          Uploaded by Dianna Smiley on <time datetime="2018-01-03">Jan 3, 2018</time>
                        </p>
                        
                      </div>
                      <div class="col-auto">
                        
                        <!-- Button -->
                        <a href="#!" class="btn btn-sm btn-white d-none d-md-inline-block">
                          Download
                        </a>

                      </div>
                      <div class="col-auto">
                        
                        <!-- Dropdown -->
                        <div class="dropdown">
                          <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                          </a>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a href="#!" class="dropdown-item">
                              Action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Another action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Something else here
                            </a>
                          </div>
                        </div>

                      </div>
                    </div> <!-- / .row -->

                  </li>
                  <li class="list-group-item px-0">
                    
                    <div class="row align-items-center">
                      <div class="col-auto">
                        
                        <!-- Avatar -->
                        <a href="#!" class="avatar avatar-lg">
                          <span class="avatar-title rounded bg-white text-secondary">
                            <span class="fe fe-film"></span>
                          </span>
                        </a>

                      </div>
                      <div class="col ml--2">

                        <!-- Title -->
                        <h4 class="card-title mb-1 name">
                          <a href="#!">Prototype Screencap</a>
                        </h4>

                        <!-- Text -->
                        <p class="card-text small text-muted mb-1">
                          23.5mb MOV
                        </p>

                        <!-- Time -->
                        <p class="card-text small text-muted">
                          Uploaded by Dianna Smiley on <time datetime="2018-01-03">Jan 3, 2018</time>
                        </p>
                        
                      </div>
                      <div class="col-auto">
                        
                        <!-- Button -->
                        <a href="#!" class="btn btn-sm btn-white d-none d-md-inline-block">
                          Download
                        </a>

                      </div>
                      <div class="col-auto">
                        
                        <!-- Dropdown -->
                        <div class="dropdown">
                          <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                          </a>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a href="#!" class="dropdown-item">
                              Action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Another action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Something else here
                            </a>
                          </div>
                        </div>

                      </div>
                    </div> <!-- / .row -->

                  </li>
                  <li class="list-group-item px-0">
                    
                    <div class="row align-items-center">
                      <div class="col-auto">
                        
                        <!-- Avatar -->
                        <a href="#!" class="avatar avatar-lg">
                          <img src="assets/img/files/file-4.jpg" alt="..." class="avatar-img rounded">
                        </a>

                      </div>
                      <div class="col ml--2">

                        <!-- Title -->
                        <h4 class="card-title mb-1 name">
                          <a href="#!">Header block example</a>
                        </h4>

                        <!-- Text -->
                        <p class="card-text small text-muted mb-1">
                          1.2mb PNG
                        </p>

                        <!-- Time -->
                        <p class="card-text small text-muted">
                          Uploaded by Dianna Smiley on <time datetime="2018-01-03">Jan 3, 2018</time>
                        </p>
                        
                      </div>
                      <div class="col-auto">
                        
                        <!-- Button -->
                        <a href="#!" class="btn btn-sm btn-white d-none d-md-inline-block">
                          Download
                        </a>

                      </div>
                      <div class="col-auto">
                        
                        <!-- Dropdown -->
                        <div class="dropdown">
                          <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                          </a>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a href="#!" class="dropdown-item">
                              Action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Another action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Something else here
                            </a>
                          </div>
                        </div>

                      </div>
                    </div> <!-- / .row -->

                  </li>
                  <li class="list-group-item px-0">
                    
                    <div class="row align-items-center">
                      <div class="col-auto">
                        
                        <!-- Avatar -->
                        <a href="#!" class="avatar avatar-lg">
                          <span class="avatar-title rounded bg-white text-secondary">
                            <span class="fe fe-pie-chart"></span>
                          </span>
                        </a>

                      </div>
                      <div class="col ml--2">

                        <!-- Title -->
                        <h4 class="card-title mb-1 name">
                          <a href="#!">User test results slides</a>
                        </h4>

                        <!-- Text -->
                        <p class="card-text small text-muted mb-1">
                          1.1mb PPTX
                        </p>

                        <!-- Time -->
                        <p class="card-text small text-muted">
                          Uploaded by Dianna Smiley on <time datetime="2018-01-03">Jan 3, 2018</time>
                        </p>
                        
                      </div>
                      <div class="col-auto">
                        
                        <!-- Button -->
                        <a href="#!" class="btn btn-sm btn-white d-none d-md-inline-block">
                          Download
                        </a>

                      </div>
                      <div class="col-auto">
                        
                        <!-- Dropdown -->
                        <div class="dropdown">
                          <a href="#!" class="dropdown-ellipses dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                          </a>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a href="#!" class="dropdown-item">
                              Action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Another action
                            </a>
                            <a href="#!" class="dropdown-item">
                              Something else here
                            </a>
                          </div>
                        </div>

                      </div>
                    </div> <!-- / .row -->

                  </li>
                </ul>

              </div>
            </div>

          </div>
        </div> <!-- / .row -->
      </div> <!-- / .container-fluid -->
      
    </div> <!-- / .main-content -->

    <!-- JAVASCRIPT
    ================================================== -->
    @@include("partials/scripts.html")

  </body>
</html>